﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品销量</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/media.css">
    <link rel="stylesheet" href="../../css/font-style.css">
    <link rel="stylesheet" href="../../css/AboutBrand.css">
    <link rel="stylesheet" href="../../css/ProductSales.css">
</head>
<body>
     <!-- 头部 -->
     <header>
        <span class="icon-arrow_lift back"></span>
        <a href="javascript:;" class="mmm">
            <img src="../../images/header_logo.png" alt="">
        </a>
        <!-- 头部中间文字，看需求 -->
        <!-- <span>头部</span> -->
        <a href="javascript:;">
            <img src="../../images/header_app.png" alt="">
        </a>
    </header>
    <!-- 产品销量 -->
    <div class="ProductSales">
        <!-- <h4 class="ProductSales_title">平板电视产品销量排行</h4> -->
        <h4 class="ProductSales_title"></h4>
        <!-- <div class="ProductSales_content">
            <a href="#">
                <div class="content_left">ldknklnapomgl;s131f321</div>
                <div class="content_right">
                    <p>kj;lfmds;lfj;lsa214532g1fg456a1f5</p>
                    <div class="price">
                        <span>32566</span>
                        <p class="star">
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                        </p>
                    </div>
                    <div class="comment">
                        <span>报价</span>
                        <span>评论</span>
                    </div>
                </div>
            </a>
        </div> -->
        <div class="ProductSales_content">
            
        </div>
        <!-- 分页按钮 -->
        <div class="btn">
            <div class="btn_left">上一页</div>
            <div class="btn_center">
                <!-- 页数下拉框 -->
                <select name="" id="page">
                    
                </select>
            </div>
            <div class="btn_right">下一页</div>
        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="foot_tool">
            <a href="javascript:;">登录</a>
            <a href="javascript:;">注册</a>
            <a href="javascript:;">返回顶部</a>
        </div>
        <div class="foot_content">
            <a href="javascript:;">手机APP下载
                <span>慢慢买手机版</span>
            </a>
            <span>--掌上比价平台</span>
            <p>m.manmanbuy.com</p>
        </div>
    </footer>
</body>
</html>
<script src="../../lib/zepto/zepto.min.js"></script>
<script src="../../lib/template/template.js"></script>
 <!-- 评论模板 -->
<script type="text/template" id="navListTmp">
    {{each result as val key}}
            <a  class="product" href="ProductComment.html?id={{val.productId}}" >
                <div class="content_left">{{val.productImg}}</div>
                <div class="content_right">
                    <p>{{val.productName}}</p>
                    <div class="price">
                        <span>{{val.productPrice}}</span>
                        <p class="star">
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                            <span class="icon-star"></span>
                        </p>
                    </div>
                    <div class="comment">
                        <span>{{val.productQuote}}</span>
                        <span>{{val.productCom}}</span>
                    </div>
                </div>
            </a>
   {{/each}}
</script>
<script type='text/javascript'>
    render();
   
    // 给id  data maxPage 定全局变量 
    var id;
    var data;
    var maxPage;//最大页数
    function render(){
        //当前URL的?号开始的字符串 
        var param = window.location.search;
        //用正则匹配对应的id
        id = param.match(/\d+/)[0];
        //用正则获取到title后面的的字符串
        data = param.match(/title=(.*)/)[1];
        //将二进制的字符串转化为 中文
        var title = decodeURI(data)+'销量排行';
        $.ajax({
            type:'get',
            url:'http://193.112.55.79:9090/api/getbrandproductlist',
            dataType:'json',
            data:{brandtitleid:id},
            success:function (res) {
                //解析html中的图片
                template.config("escape",false);
                // 求出最大的页数
                maxPage = Math.ceil(res.totalCount / res.pagesize);
                var html =  '';
                for(var i = 1; i <= maxPage; i++ )
                {
                    html += '<option value="'+i+'">'+i+'/'+maxPage+'</option>';
                }
                // 页数下拉框内容
                $('#page').html(html);
                // 准备模板字符串
                  var htmlStr = template('navListTmp',res);
                //   动态渲染数据
                  $('.ProductSales_content').append(htmlStr);
                // $('.about_brand_content').html(htmlStr);
                $('.ProductSales_title').html(title);
            }
        })
    }
    // 默认页面为1；
    var page = 1;
   // 左边上一页的点击事件
    $('.btn_left').on('click',function(){
        if(page > 1)
        {
            page--; /* 必须放在判断之后 */
            $.ajax({
            type:'get',
            url:'http://193.112.55.79:9090/api/getbrandproductlist',
            dataType:'json',
            data:{brandtitleid:id,pageid:page},
            success:function (res) {
                // 点击上一页的排他事件
                $('#page').children().prop('selected',false).eq(page - 1).prop('selected',true);
                //解析html中的图片
                template.config("escape",false);
                // console.log(res,maxPage);
                // 准备模板字符串
                var htmlStr = template('navListTmp',res);
                //   动态渲染数据
                    $('.ProductSales_content').html(htmlStr);
                }
            })
        }
    });


    $('.btn_right').on('click',function(){
        if(page < maxPage)
        {
            page++;/* 必须放在判断之后 */
            $.ajax({
                type:'get',
                url:'http://193.112.55.79:9090/api/getbrandproductlist',
                dataType:'json',
                data:{brandtitleid:id,pageid:page},
                success:function (res) {
                    $('#page').children().prop('selected',false).eq(page - 1).prop('selected',true);
                    console.log()
                    template.config("escape",false);//解析html中的图片
                    // console.log(res,maxPage);
                    // 准备模板字符串
                    var htmlStr = template('navListTmp',res);
                    //   动态渲染数据
                        $('.ProductSales_content').html(htmlStr);
                    // $('.about_brand_content').html(htmlStr);
                }
            })
        }
    });

    // 给页面下拉框改变事件
    $('#page').on('change',function(){
        page = $(this).val();
        $.ajax({
            type:'get',
            url:'http://193.112.55.79:9090/api/getbrandproductlist',
            dataType:'json',
            data:{brandtitleid:id,pageid:page},
            success:function (res) {
                $('#page').children().prop('selected',false).eq(page - 1).prop('selected',true);
                console.log()
                template.config("escape",false);//解析html中的图片
                // console.log(res,maxPage);
                // 准备模板字符串
                var htmlStr = template('navListTmp',res);
                //   动态渲染数据
                    $('.ProductSales_content').html(htmlStr);
                // $('.about_brand_content').html(htmlStr);
                }
            })
    });

    // 缓存产品的图片地址和 对应文本（用委派方式）
    $('.ProductSales_content').on('click','.product',function (){
        var img = $(this).children('.content_left').children().attr('src');
        var title = $(this).children('.content_right').children().eq(0).text();
        // 缓存图片的地址
        localStorage.setItem('img',img);
        // 缓存文本
        localStorage.setItem('title',title);
    })
</script>
<script type="text/javascript">
     $('.back').on('click',function(){
        window.history.go(-1);
    });
</script>
